<template>
  <div class="app">
    <!-- 面包屑导航区域 开始 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图删除管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航区域 开始 -->
    <!-- 头部查询按钮 与 搜索框 开始 -->
    <div class="searchTitle">
      <el-input
        class="searchBook"
        placeholder="请输入描述内容"
        style="width: 300px"
        v-model="condition.search"
        clearable
      >
      </el-input>
      <el-autocomplete
        class="inline-input bookList"
        v-model="bookName"
        clearable
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <el-button
        icon="el-icon-search"
        class="searchBookButton my-el-button"
        type="primary"
        @click="queryBookButton"
        >查询</el-button
      >
    </div>
    <!-- 头部查询按钮 与 搜索框 结束 -->
    <!-- table数据展示 开始 -->
    <el-table
      v-loading="loading"
      :fit="true"
      :data="rotationCharts"
      border
      style="width: 100%"
    >
      <el-table-column fixed type="index" width="50"> </el-table-column>
      <el-table-column prop="date" label="书籍名称" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.bookDetail[0].bookName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="chartDescribe"
        label="描述"
        width="200"
      >
      </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img
            style="height:130px;width:250px;"
            :src="scope.row.chartUrl"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          <el-dropdown>
            <el-button
              :type="scope.row.chartStatus == 1 ? 'success' : 'danger'"
            >
              {{ scope.row.chartStatus == 1 ? '正常' : '已删除'
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="my-el-button-text"
            @click="handleEdit(scope.$index, scope.row)"
            size="small"
            >恢复</el-button
          >
          <el-button
            type="text"
            class="my-el-button-text"
            @click="handleRemove(scope.$index, scope.row)"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- table数据展示 结束 -->
  </div>
</template>
<script>
import {
  queryRotationChart,
  modifyRotationChart,
  removeRotationChartId
} from '@/network/rotationChartManager'
import { bookQueryPage } from '@/network/bookManager'
export default {
  data() {
    return {
      // 查询条件
      condition: {
        search: '',
        chartBookId: '',
        chartStatus: 0
      },
      // 轮播图数组
      rotationCharts: [
        {
          bookDetail: [{ bookName: '' }]
        }
      ],
      // 搜索框
      bookName: '',
      // 加载动画
      loading: false
    }
  },
  methods: {
    // 查询激活后匹配
    querySearch(queryString, cb) {
      var restaurants = this.bookList
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据

      cb(results)
    },
    // 选中 书籍
    handleSelect(item) {
      this.condition.chartBookId = item._id
    },
    // 点击查询 按钮
    queryBookButton() {
      if (this.bookName == '') {
        this.condition.chartBookId = ''
      } else {
        let obj = this.bookList.find(item => {
          //遍历list的数据
          return item.value === this.bookName //筛选出匹配数据
        })
        if (obj == null) {
          return this.$message.warning('请选择正确的书籍')
        }
      }

      this.queryCarouselChart()
    },
    // 查询 轮播图
    async queryCarouselChart() {
      this.loading = true
      let res = await queryRotationChart(this.condition)
      console.info(res)
      this.rotationCharts = JSON.parse(res.resp_data).list
      this.loading = false
      console.info(this.rotationCharts)
    },
    // 处理数据
    loadAll(res) {
      this.bookList = []
      for (let rs in res) {
        let dropDownList = {}
        dropDownList.value = JSON.parse(res[rs]).bookName
        dropDownList._id = JSON.parse(res[rs])._id
        this.bookList.push(dropDownList)
      }
    },
    // 修改按钮
    handleEdit(index, row) {
      this.$confirm('此操作将永久修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          row.chartStatus = 1
          modifyRotationChart(row)
          this.rotationCharts.splice(index, 1)
          this.$message.success('修改成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
    },
    // 删除按钮
    handleRemove(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.rotationCharts.splice(index, 1)
          removeRotationChartId(row._id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      console.info(row)
    }
  },
  async mounted() {
    this.queryCarouselChart()
    let bookListRes = await bookQueryPage({
      page: 1,
      size: 1000
    })
    this.loadAll(bookListRes.data)
    console.info(bookListRes)
  }
}
</script>
<style lang="less" scoped>
.searchTitle {
  margin-bottom: 30px;
}
.bookList {
  margin-left: 20px;
}
.addBookButton {
  float: right;
}
.addBookButton::after {
  content: '';
  display: inline-block;
  clear: both;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #409eff;
}
.searchBookButton {
  margin-left: 20px;
}
</style>
